<template>
  <div class="content">
    <div class="pannelLeft">thr-左侧面板</div>
    <div class="baseMap">thr-地图</div>
    <div class="pannelRight">thr-右侧面板</div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
import axios from 'axios';
let timer = null
const getJson = () => {
  axios.get('/static/polls/json/nine_3.json')
  .then(function (response) {
    // 加载成功后，response.data 包含获取到的 JSON 数据
    console.log('nine_3',response.data)
  })
  .catch(function (error) {
    console.log('无法加载JSON文件', error)
  })
}
getJson()
timer = setInterval(() => {
  getJson()
}, 3000)
onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 80px;
  .pannelLeft, .pannelRight {
    flex: 1;
    background-color: beige;
  }
  .baseMap {
    width: 50%;
    background-color: blueviolet;
  }
}
</style>